import { Image, Navigator, View } from "@tarojs/components";
import Taro, { useShareAppMessage } from "@tarojs/taro";
import { Empty } from "src/components/empty";
import { useFoodMixIngredients } from "src/hooks/useFoods";
import { AtList, AtListItem } from "taro-ui";

function MixIngredient() {
  const params = Taro.getCurrentInstance()?.router?.params
  const foodId = params?.id

  useShareAppMessage(() => {
    return {
      title: '准备材料',
      path: `/pages/mix-ingredient/index?id=${foodId}`,
    }
  })

  const { foodWithMixIngredients } = useFoodMixIngredients(foodId)
  const mixIngredients = foodWithMixIngredients?.mixIngredients || []

  return (
    <View className='formula'>
      <View className='header-banner'>
        {
          !!foodWithMixIngredients?.image &&
          <Image src={foodWithMixIngredients?.image} mode='aspectFill' />
        }
      </View>
      <View className='header'>
        <View className='header-name'>准备材料</View>
        <View className='header-label'>{ foodWithMixIngredients?.name }</View>
      </View>
      <View className='body'>
        <View className='mix-list'>
          {
            mixIngredients.length > 0 ?
              <AtList hasBorder={false}>
                {
                    mixIngredients.map((mixIngredient) => {
                      const hasFormulas = mixIngredient.formulasCount && mixIngredient.formulasCount > 0
                      return (
                        <Navigator
                          key={mixIngredient.id}
                          url={hasFormulas ? `/pages/formula/index?id=${mixIngredient.id}` : undefined}
                        >
                          <AtListItem
                            title={mixIngredient.name}
                            note={mixIngredient.remark}
                            arrow={hasFormulas ? 'right' : undefined}
                          />
                        </Navigator>
                      )
                    })
                }
              </AtList> :
              <Empty />
          }
        </View>
      </View>
    </View>
  );
}

export default MixIngredient;
